<template>
  <div>
    <div>
      <h2 v-for="item in arr" v-bind:key="item.index">{{item.index}} {{item.msg}}</h2>
    </div>
    <div>
      <el-button type="primary">主要按钮</el-button>
    </div>
    <div>
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger" @click="open">危险按钮</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "vueui",
  data: function() {
    var obj = {};
    obj.msg = 1111;
    obj.name = "chenrui";
    obj.data = "this data";

    var obj1 = {};
    obj1.msg = 1111;
    obj1.name = "chenrui";
    obj1.data = "this data";
    var arr = [];
    arr.push(obj);
    arr.push(obj1);
    return { arr };
  },
  methods: {
    open: function() {
      this.$alert("这是一段内容", "标题名称", {
        confirmButtonText: "确定",
        callback: action => {
          this.$message({
            type: "info",
            message: `action: ${action}`
          });
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
